<style scoped>

  .contact{
    width:calc( 100vw );
    height:calc( 100vh );
    background-color: #FFF;;
  }

  .input-box{
    width:100%;
    height:50px;
    border-bottom:1px solid #e4e4e4;
  }

  .input-box input{
    width:100%;
    height: 50px;
    line-height:50px;
    display: block;
    border:none;
    outline:none;
    box-sizing: border-box;
    padding-left:15px;
    font-size:16px;
    background-color: transparent;
    color:#000;
  }

  .link-box{
    width:calc( 100vw );
    height:calc( 100vh - 50px);
    overflow-y: auto;
  }

  .link-box a{
    width:100%;
    height: 100px;
    padding:10px 10px;
    box-sizing: border-box;
    display: block;
    position: relative;
    border-bottom:1px solid #e4e4e4;
    color:#000;
    text-decoration: none;
  }

  .link-box a p{
      margin-bottom:5px;
    }

  .link-box a p.fcolor{
    color:#999;
  }

  .link-box a img.album{
    position: absolute;
    width:80px;
    height:80px;
    right: 10px;
    bottom:10px;
  }


</style>
<template>
  <div class="contact">
    <div class="input-box">
      <input type="text" placeholder="输入关键字进行搜索" v-model="keyword" >
    </div>
    <div class="link-box">
      <router-link v-for="item in searchArray" :key="item.songId" :to="{name:'player',params:{id:item.songId}}">
        <p>{{item.songName}}</p>
        <p class="fcolor">{{item.artistName}}</p>
        <p class="fcolor">{{item.albumName}}</p>
        <img :src="item.songPicSmall.split('@')[0]+'@s_0,w_80,h_80'" alt="" class="album">
      </router-link>
    </div>
  </div>
</template>
<script>
import {mapState} from 'Vuex'
export default {
  data () {
    return {
      keyword: ''
    }
  },
  mounted () {
    this.keyword = this.$route.params.keyword
  },
  computed: mapState({
    searchArray: state => state.search.searchArray
  }),
  watch: {
    keyword (val) {
      this.search(val)
    }
  },
  methods: {
    search (txt) {
      if (txt === '') { return }
      this.$store.dispatch('search', txt)
    }
  }

}
</script>
